/* ---------------------------------- *\
            Loading
\* ---------------------------------- */

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

.c-loading {
  display: inline-block;
  height: 1em;
  position: relative;
  overflow: hidden;
  background-color: var(--lf-color-secondary-50);

  &:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
                    90deg,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 0.2) 20.24%,
                    rgba(255, 255, 255, 0.5) 42.57%,
                    rgba(255, 255, 255, 0) 66.35%
    );
    animation: shimmer 1.5s infinite;
    content: '';
  }
}

